<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>iPortal 地图列表</title>
    <script type="text/javascript" include="jquery,bootstrap-css" src="../js/include-web.js"></script>
    <script type="text/javascript"  src="../../dist/include-leaflet.js"></script>
    <style>*{margin: 0;padding: 0;box-sizing: border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
        a{text-decoration: none}
        ul,li{list-style: none}
        .gallery-item{margin-bottom: 30px;}
        .gallery-item-border{  border: 1px solid #dadada;-webkit-box-shadow: 0px 2px 3px #dcdcdc;box-shadow: 0px 2px 3px #dcdcdc;background:white;}
        .thumbnail>img, .thumbnail a>img{margin-right: auto;margin-left: auto;}
        .gallery-item-img{height: 170px !important;width: 262px !important;}
        .mapDetails{  margin: 0px 0 12px 16px; height: 21px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px !important; color: #7c7c7c;}
        .mapUserDetails{width: 100%;border-top: 1px solid #E8E8E8;font-size: 13px; }
        .textEllipsis{display: inline-block;padding-left: 10px; padding-top: 12px; padding-bottom: 12px; vertical-align: top;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .mapBottomList{ padding-left: 10px; padding-top: 13px; padding-bottom: 12px; vertical-align: top; float: right; padding-right: 30px; border-left: 1px solid #ececec; }
        .ip-toolbar-footer{ text-align: center}
        .pagination>li{ display: inline;}
        .pagination>li>a { position: relative; float: left; padding: 8px 16px; margin-left: -1px; line-height: 1.42857143;color: #737373; text-decoration: none; background-color: #fff; border: 1px solid #ececec;  }
        #mapListPaging>.pagination{ margin: 10px 15px;}
        #mapListPaging>.pagination>li>.disable{ pointer-events: none; background-color: rgba(0,0,0,0.1);}
        #mapListPaging>.pagination>li>.active{background-color: #0083CB;color: white;}
    </style>
</head>
<body style=" margin: 0;overflow: auto;background: #F2F2F2;width: 100%;height:100%;position: absolute;top: 0;">
<div class="container" style="margin-bottom: 100px">
    <div class="page-header">
        <h4>iPortal QueryMaps使用示例</h4>
    </div>
    <div class="col-md-10">
        <div class="row">
            <div class="col-md-12">
                <!--所有Maps的承载DIV-->
                <div class="row" id="mapList">
                    <!--单个Map数据的可视化承载DIV 添加在此位置中-->
                </div>
                <!--分页切换列表-->、
                <div class="row" id="mapListFooter">
                    <div class="col-md-12">
                        <div class="ip-toolbar-footer" id="mapListPaging">
                            <ul class="pagination">
                                <li><a href="javascript:void(0)"><i class="glyphicon glyphicon-chevron-left"></i></a></li>
                                <li><a href="javascript:void(0)"><i class="glyphicon glyphicon-chevron-right"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    //iportal的URL地址 或根据情况添加自己的本地iportal地址：http://localhost:8091/iportal
    var iPortalUrl="http://support.supermap.com.cn:8092";
    //默认请求的参数
    var mapsCurrentPage=1;//默认请求第一页
    var mapsPageSize=9;//每一页显示9条Map信息
    //全局变量，承载请求后，一共有多少页数
    var totalPages;
    var queryParams={
        currentPage:mapsCurrentPage,
        pageSize:mapsPageSize,
    };
    //Maps查询初始化工作
    var iPoortalMaps=new SuperMap.iPortal(iPortalUrl);
    $(document).ready(function () {
        //加载完DOM后，开始地图数据查询并添加
        iPoortalMaps.load().then(function () {
            queryMaps(queryParams);
        });
        //为分页列表项绑定事件
        $('#mapListPaging>.pagination').delegate('.mapListChang','click',function (e) {
            if(mapsCurrentPage!=parseInt(e.currentTarget.text)){
                mapsCurrentPage=parseInt(e.currentTarget.text)
                paginationClick(mapsCurrentPage);
            }
        });
        //切换到上一页
        $(".glyphicon-chevron-left").parent().click(function () {
            mapsCurrentPage--;
            paginationClick(mapsCurrentPage);
        });
        //切换到下一页
        $(".glyphicon-chevron-right").parent().click(function () {
            mapsCurrentPage++;
            paginationClick(mapsCurrentPage);
        });
    });
    // 查询iPortal中的地图
    function queryMaps(queryParams){
        iPoortalMaps.queryMaps(queryParams).then(function (mapsData) {
            //返回的结果集，需要查看可打开下行代码
            // console.log(mapsData);
            $("#mapList").children().remove();
            //将结果集进行遍历，并添加到HTML中
            $.each(mapsData.content,function (i) {
                //解析时间戳，可根据需求自行处理
                var createTime= new Date(parseInt(mapsData.content[i].createTime)).toLocaleString();
                var mapDOM=$("<div class='col-md-4 gallery-item'>" +
                        "<div class='gallery-item-border'>"+
                        "<a href='JavaScript:void(0)' target='_blank' class='thumbnail' style='margin-bottom: 10px'>"+
                        "<img  class='gallery-item-img' src='"+mapsData.content[i].thumbnail+"' alt=''>"+
                        "</a>"+
                        "<div>"+
                        "<p class='mapDetails'>"+mapsData.content[i].title+"</p>"+
                        "<p class='mapDetails'>"+'创建于：'+createTime+"<span class='mapTime'>"+"</span>"+"</p>"+
                        "<div class='mapUserDetails'>"+
                        "<div class='textEllipsis'>"+
                        "<span class='glyphicon glyphicon-user'>"+"</span>"+"&nbsp;"+mapsData.content[i].userName+
                        "</div>"+
                        "<div class='mapBottomList'>"+
                        "<span class='glyphicon glyphicon-eye-open'>"+"</span>"+
                        "<span style='text-align: center'>"+"&nbsp;"+mapsData.content[i].visitCount+"</span>"+
                        "</div>"+
                        "</div>"+
                        "</div>"+
                        "</div>"+
                        "</div>")
                $("#mapList").append(mapDOM);
            });
            //初始化分页列表以及分页数目发生变化时执行一下
            if(!totalPages || totalPages!==mapsData.totalPage){
                totalPages = mapsData.totalPage;
                initPages(mapsData.totalPage);
            }
        })
    };
    // 初始化分页列表UI
    function initPages(totalPage) {
        for(var i=0;i<totalPage;i++){
            if(i==(mapsCurrentPage-1)){
                var mapListPaging=$("<li>"+"<a href='JavaScript:void(0)' class='mapListChang active' >"+(i+1)+"</a>"+"</li>")
            }else{
                var mapListPaging=$("<li>"+"<a href='JavaScript:void(0)' class='mapListChang ' >"+(i+1)+"</a>"+"</li>")
            }
            mapListPaging.insertBefore( $("#mapListPaging>.pagination>li:last-child"))
        }
        //根据初始页面的设置，判断向前/后 翻页按钮是否需要禁止点击
        if(mapsCurrentPage==1){
            $(".glyphicon-chevron-left").parent().addClass('disable');
        }else if(mapsCurrentPage==totalPage){
            $(".glyphicon-chevron-right").parent().addClass('disable');
        }
    };
    //页面的点击事件，触发的function
    function paginationClick(mapsCurrentPage) {
        if(mapsCurrentPage==1){
            $(".glyphicon-chevron-left").parent().addClass('disable');
            $(".glyphicon-chevron-right").parent().removeClass('disable');
        }else if(mapsCurrentPage==totalPages){
            $(".glyphicon-chevron-right").parent().addClass('disable');
            $(".glyphicon-chevron-left").parent().removeClass('disable');
        }else{
            $(".glyphicon-chevron-left").parent().removeClass('disable');
            $(".glyphicon-chevron-right").parent().removeClass('disable');
        }
        queryParams={
            currentPage:mapsCurrentPage,
            pageSize:mapsPageSize,
        };
        queryMaps(queryParams);
        $("#mapListPaging>.pagination>li").eq(mapsCurrentPage).children().addClass('active').parent().siblings().children().removeClass('active');
    }
</script>
</body>
</html>